<!--
 * @Autor: 黄旗
 * @Date: 2020-06-29 15:07:34
-->
<template>
    <Card :bordered="false" dis-hover class="ivu-mt">
        <Form ref="form" :model="params" :label-width="80">
            <Row :gutter="24" type="flex">
                <Col>
                <RadioGroup v-model="timebutton" type="button" @on-change="handleChangeVisitType">
                    <Radio label="1">近一个月</Radio>
                    <Radio label="2">近三个月</Radio>
                    <!-- <Radio label="3">近半年</Radio> -->
                </RadioGroup>
                </Col>
                <Col>
                    <DatePicker
                    :options="options"
                    type="daterange"
                    v-width="'100%'"
                    v-model="paramsdate"
                    placeholder="请选择操作日期"
                    element-id="date"
                    :transfer="true"
                    clearable
                    @on-change="changeDate"
                    />
                </Col>
                <Col>
                    <Input v-model="params.realname" placeholder="请输入操作人姓名" clearable @on-enter="askDatas" @on-clear="askDatas"/>
                </Col>
                <Col>
                    <Input v-model="params.content" style="width:240px" placeholder="请输入操作内容，支持模糊搜索" clearable @on-enter="askDatas" @on-clear="askDatas"/>
                </Col>
            </Row>
        </Form>
        <div class="i-table-no-border" style="margin-top:15px">
            <Table :columns="columns" :data="data" :loading="loading">
                <template slot-scope="{ row }" slot="index">
                    <a href="javaScript:;" @click="details(row)">{{row.serial_no}}</a>
                </template>
            </Table>
            <div class="ivu-mt ivu-text-center">
                <Page
                :total="total"
                :current.sync="params.page"
                show-total
                show-elevator
                :page-size="params.pageSize"
                @on-change="changePage"
                :page-size-opts="pageOpts"
                show-sizer transfer
                @on-page-size-change="changePageSize"
                />
            </div>
        </div>

        <Modal v-model="modal" draggable title="日志详细" :footer-hide="true" width="50">
            <Form :label-width="85" ref="modals">
                <FormItem label="操作模块：">
                    <span>{{FormData.module}}</span>
                </FormItem>
                <FormItem label="操作信息：">
                    <span>{{FormData.realname}}&nbsp/&nbsp{{FormData.role}}&nbsp/&nbsp{{FormData.ip}}&nbsp/&nbsp{{FormData.created_at}}</span>
                </FormItem>
                <FormItem label="操作内容：">
                    <span>{{FormData.content}}</span>
                </FormItem>
                <FormItem label="请求地址：">
                    <span>{{FormData.url}}</span>
                </FormItem>
                <FormItem label="操作方法：">
                    <span>{{FormData.action}}</span>
                </FormItem>
                <FormItem label="请求参数：">
                    <span>{{FormData.method === 'POST'?FormData.post_data:FormData.get_data}}</span>
                </FormItem>
                <FormItem label="操作结果：">
                    <!-- <span>{{FormData.error_code===200?'正常':'异常'}}</span> -->
                    <Tag color="success" v-if="FormData.error_code===200">正常</Tag>
                    <Tag color="error" v-else>异常</Tag>
                </FormItem>
                <FormItem label="异常信息：">
                    <span>{{FormData.error_msg}}{{FormData.error_data !==""?` - ${FormData.error_data}`:''}}</span>
                </FormItem>
            </Form>
        </Modal>
    </Card>
</template>

<script>
     /* 这里导入其他文件：import 《组件名称》 from '《组件路径》 */
    import { logindex, logview } from '@api/systemlog';
    import dayjs from 'dayjs'
    export default {
        /* import引入的组件注入到components对象中使用 */
        components: {},
        data () {
            return {
                timebutton: '1',
                total: 0,
                params: { realname: '', content: '', start_time: '', end_time: '', page: 1, pageSize: 10 },
                paramsdate: [],
                pageOpts: [10, 20, 30, 50],
                columns: [
                    { title: '日志编号', fixed: 'left', slot: 'index', width: 100 },
                    { title: '人员', fixed: 'left', key: 'realname', width: 100, ellipsis: true, tooltip: true },
                    { title: '角色', key: 'role', minWidth: 180, ellipsis: true, tooltip: true },
                    { title: '模块', key: 'module', width: 100, ellipsis: true, tooltip: true },
                    { title: '结果', key: 'result', width: 100, ellipsis: true, tooltip: true },
                    { title: '系统', key: 'system', width: 140, ellipsis: true, tooltip: true },
                    { title: '终端', key: 'terminal', width: 200, ellipsis: true, tooltip: true },
                    { title: '时间', key: 'created_at', width: 170 },
                    { title: 'IP', key: 'ip', width: 220 },
                    { title: '内容', key: 'content', width: 120, ellipsis: true, tooltip: true }
                ],
                data: [],
                loading: false,
                modal: false,
                options: {
                    disabledDate (date) {
                        return date && date.valueOf() > Date.now()
                    }
                },
                nowDayTime: '',
                oneMonth: '',
                threeMonth: '',
                sixMonth: '',
                FormData: []
            };
        },
        /* 监听属性 类似于data概念 */
        computed: {},
        watch: {},
        /* 创建完成能访问this实例 */
        created () { this.initial() },
        /* 函数方法集合 */
        methods: {
            /* @函数功能: 初始化 */
            initial () {
                this.getNowDay()
            },
            /* @函数功能: 请求数据 */
            askData () {
                this.loading = true
                logindex(this.params).then(res => {
                    this.total = res.total
                    this.data = res.list
                    this.loading = false
                })
            },
            askDatas () {
                this.params.page = 1
                this.askData()
            },
            // 近1 3 6个月
            getNowDay () {
                this.nowDayTime = dayjs().format('YYYY-MM-DD')
                this.oneMonth = dayjs().subtract(30, 'day').format('YYYY-MM-DD')
                this.threeMonth = dayjs().subtract(90, 'day').format('YYYY-MM-DD')
                this.sixMonth = dayjs().subtract(180, 'day').format('YYYY-MM-DD')
                this.handleChangeVisitType(this.timebutton)
            },
            // 切换单月 3个月 半年
            handleChangeVisitType (e) {
                switch (e) {
                case '1':
                    this.paramsdate = [this.oneMonth, this.nowDayTime]
                    break
                case '2':
                    this.paramsdate = [this.threeMonth, this.nowDayTime]
                    break
                case '3':
                    this.paramsdate = [this.sixMonth, this.nowDayTime]
                    break
                default:
                    this.paramsdate = [this.oneMonth, this.nowDayTime]
                    this.timebutton = '1'
                    break
                }
                this.params.start_time = dayjs(this.paramsdate[0]).format('YYYY-MM-DD')
                this.params.end_time = dayjs(this.paramsdate[1]).format('YYYY-MM-DD')
                this.askData()
            },
            // 显示条数
            changePageSize (e) {
                this.params.pageSize = e
                this.askData()
            },
            // 分页
            changePage (e) {
                this.params.page = e
                this.askData()
            },
            details (row) {
                logview({ id: row.oid }).then(res => {
                    if (res.error_data !== '') {
                        res.error_data = JSON.stringify(res.error_data)
                    }
                    console.log(res)
                    this.FormData = res
                    this.modal = true
                })
            },
            changeDate () {
                this.timebutton = ''
                this.params.start_time = this.paramsdate[0] ? dayjs(this.paramsdate[0]).format('YYYY-MM-DD') : ''
                this.params.end_time = this.paramsdate[1] ? dayjs(this.paramsdate[1]).format('YYYY-MM-DD') : ''
                this.askDatas()
            }
        },
        /* 挂载完成能访问DOM元素 */
        mounted () {},
        /* 创建之前 */
        beforeCreate () {},
        /* 挂载之前 */
        beforeMount () {},
        /* 更新之前 */
        beforeUpdate () {},
        /* 更新之后 */
        updated () {},
        /* 销毁之前 */
        beforeDestroy () {},
        /* 销毁完成 */
        destroyed () {},
        /* 有keep-alive缓存即会触发 */
        activated () {}
    }
</script>
